<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html {
      height: 3000px;
      width: 3000px;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #6ff;
      margin: 50px;
      overflow: hidden;
      margin-top: 1000px;
      margin-left: 1000px;
    }

    .sub {
      width: 100px;
      height: 100px;
      background-color: #00f;
      margin: 50px;
      /* 点透 属性: 添加此属性 鼠标事件将不会在此元素触发 而是透过此元素 在父元素上触发 */
      pointer-events: none;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="sub"></div>
  </div>
</body>
<script>
  // 事件对象  => 事件在发生的的相关信息
  // 鼠标,键盘按下的按键(左中右)  触发事件的元素 鼠标的位置  组合键(ctrl alt shift win)

  // 事件对象 

  // 如何获取事件对象?

  // 常规浏览器
  // 在绑定事件的匿名函数中接收形式参数  event/evt/e

  // IE  
  // window.event


  // 通用
  // ctrlKey   事件触发时,ctrl键是否被按下
  // altKey    事件触发时,alt键是否被按下
  // shiftKey  事件触发时,shift键是否被按下
  // metaKey   事件触发时,win键是否被按下
  // 一般用来做组合键  ctrl+enter 

  // type      事件类型(load scroll resize click mousedown keydown)
  // target    事件源(触发事件的源头 给父元素绑定事件 子元素也可以触发(现阶段可以理解为子元素属于父元素))  到底是谁触发?
  // srcElement 事件源(IE 和 常规浏览器)


  // 鼠标事件相关  
  // clientX/clientY  获取鼠标相对于可视窗口左上角的位置   (相对于窗口可视坐标)
  // pageX / pageY    获取鼠标相对于文档左上角的位置   (相对于文档的实际坐标)

  // 火狐低版本没有pageX pageY  
  // 兼容写法 =>  自己算
  // var  pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft); 
  // var  pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop); 

  // offsetX/offsetY  获取鼠标相对于事件源左上角的位置


  var box = document.getElementsByClassName("box")[0];

  box.onmousedown = function (e) {
    // console.log(e);
    // console.log(window.event);

    // 事件对象的兼容
    var e = e || window.event;
    console.log(e);

    // console.log(e.clientX,e.clientY);
    // console.log(e.pageX,e.pageY);

    console.log(e.target, e.offsetX, e.offsetY);



  }




</script>

</html>